import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Card, Space, message, Input, Tabs, Row, Col, Checkbox } from 'antd';
import { connect } from 'umi';
import MyDataTable from '@/components/MyDataTable';
import moment from 'moment';
import request from '@/utils/request';
import DemandEntry from './demandEntry';

const { Search } = Input;
const apiURL = '/api/services/app/Demands/';
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            params: { keywords: '' },
            freshNum: 0,
            record: [],
        };
    }
    doubleClick = (record: any) => {
        console.log(record);
        this.setState({ record });
        this.formRef.fetchDatas(record.id);
    }
    setRowSelection = (items: any) => {
        this.setState({ record: items });
    }
    apprvPO = () => {
        const { record, freshNum } = this.state;
        if (record.length <= 0) {
            message.warning('请至少选择一条记录')
            return;
        }
        var data: any = []
        record.forEach((element: any) => {
            data.push(element.id)
        });
        request(apiURL + 'DoApprv', {
            method: 'POST',
            data,
        }).then((response) => {
            if (response) {
                if (response.success) {
                    message.success('核准成功！');
                }
                this.setState({ freshNum: freshNum + 1 });
            }
        });

    }
    callback = (key: any) => {
        const { params, freshNum } = this.state;
        params.keywords = key
        this.setState({ params, freshNum: freshNum + 1 });
    }
    onSearch = (keywords: string) => {
        this.callback(keywords)
    };
    formRef: any = React.createRef();
    onRef = (ref: any) => {
        this.formRef = ref
    }
    render() {
        const { params, freshNum, record } = this.state;
        const columns = [
            {
                title: '需求号',
                dataIndex: 'id',
                render: (text: any, record: any) => <span> {text}</span>
            },
            {
                title: '核准',
                dataIndex: 'approve',
                render: (text: boolean) => <Checkbox checked={text} />
            },
            {
                title: '需求数量',
                dataIndex: 'reqQty',
                render: (text: any) => <span><strong>{text}</strong></span>
            },
            {
                title: '需求日期',
                dataIndex: 'reqDate',
                render: (text: any) => text ? moment(text).format("YYYY-MM-DD") : ''
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'partDescription',
            },
        ];
        return (
            <PageHeaderWrapper title={false}>
                <Card title="需求输入" extra={[
                    <Space key="S1">
                        <Button type="primary" onClick={() => this.apprvPO()}>核准</Button>
                    </Space>
                ]}>
                    <Row gutter={24}>
                        <Col xs={24} sm={24} md={24} lg={10} xl={10}>
                            <DemandEntry onRef={this.onRef} fetchData={this.callback} id={record.id} />
                        </Col>
                        <Col xs={24} sm={24} md={24} lg={14} xl={14}>
                            <Search placeholder="关键词搜索" allowClear enterButton onSearch={this.onSearch} />
                            <MyDataTable
                                act="GetList"
                                columns={columns}
                                freshNum={freshNum}
                                pageSize={10}
                                control="Demands"
                                doubleClick={this.doubleClick}
                                rowSelection={(items: any) => this.setRowSelection(items)}
                                params={params}>
                            </MyDataTable>
                        </Col>
                    </Row>


                </Card>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp, user }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: user.currentUser,
}))(ViewPage);